<template>
    <a-menu @click="clickHandler" v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
        <a-menu-item key="/">
            <bar-chart-outlined />
            <span>管理中心</span>
        </a-menu-item>
        <a-sub-menu key="sub1">
            <template #title>
                <span>
                    <SettingOutlined />
                    <span>系统管理</span>
                </span>
            </template>
            <a-menu-item key="/menu">菜单管理</a-menu-item>
            <a-menu-item key="/role">角色管理</a-menu-item>
            <a-menu-item key="/account">账号管理</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
            <template #title>
                <span>
                    <team-outlined />
                    <span>内容管理</span>
                </span>
            </template>
            <a-menu-item key="/classify">分类管理</a-menu-item>
            <a-menu-item key="/posts">内容管理</a-menu-item>
            <a-menu-item key="/banner">轮播图管理</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
            <template #title>
                <span>
                    <MoneyCollectOutlined />
                    <span>订单管理</span>
                </span>
            </template>
            <a-menu-item key="/orders">企业认证订单</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub4">
            <template #title>
                <span>
                    <ShopOutlined />
                    <span>企业管理</span>
                </span>
            </template>
            <a-menu-item key="/business">企业列表</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub5">
            <template #title>
                <span>
                    <team-outlined />
                    <span>员工管理</span>
                </span>
            </template>
            <a-menu-item key="/member">员工列表</a-menu-item>
        </a-sub-menu>

        <a-sub-menu key="sub6">
            <template #title>
                <span>
                    <PrinterOutlined />
                    <span>预约管理</span>
                </span>
            </template>
            <a-menu-item key="/appointment">预约列表</a-menu-item>
        </a-sub-menu>
    </a-menu>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import {
    BarChartOutlined,
    SettingOutlined,
    FileWordOutlined,
    MoneyCollectOutlined,
    PrinterOutlined,
    ShopOutlined,
    PieChartOutlined,
    DesktopOutlined,
    UserOutlined,
    TeamOutlined,
    FileOutlined,
} from '@ant-design/icons-vue';
const router = useRouter()
// 接受父组件传递的属性参数
const selectedKeys = defineProps([])
const clickHandler = ({ key }: { item: string, key: string, keyPath: string }) => {
    // console.log(item, key, keyPath, 'item, key, keyPath');
    router.push(key)

}
</script>